<template>
  <div class="login_one">
    <div class="login"
         v-wechat-title="$route.meta.title">
      <div class="contentLogin">
        <div class="content_input">
          <div class="title">
            <p>Welcome to login</p>
          </div>
          <!--登录表单区域-->
          <el-form ref="loginFormRef"
                   :model="loginForm"
                   :rules="loginFormRules"
                   label-width="0px"
                   class="login_form">
            <!--登录名-->
            <el-form-item prop="username">
              <el-input v-model="loginForm.username"
                        placeholder="请输入账号"
                        prefix-icon="el-icon-user"
                        ref="input"></el-input>
            </el-form-item>
            <!--密码-->
            <el-form-item prop="password">
              <el-input v-model="loginForm.password"
                        placeholder="请输入密码"
                        prefix-icon="el-icon-lock"
                        type="password"
                        show-password></el-input>
            </el-form-item>
            <div class="content_button">
              <el-button type="primary"
                         class="login_button"
                         :loading="isLoading"
                         @click="login">登录</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { ElMessage } from 'element-plus'
import { Base64 } from 'js-base64'
export default {
  data () {
    return {
      userToken: '',
      isLoading: false,
      loginForm: {
        grant_type: 'password',
        username: '',
        password: ''
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }]
      }
    }
  },
  created () {
    const that = this
    document.onkeydown = function (e) {
      e = window.event || e
      if (that.$route.path === '/login' && (e.code === 'Enter' || e.code === 'enter') && that.isLoading === false) { // 验证在登录界面和按得键是回车键enter
        that.login()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 默认聚集文本焦点
      this.$refs.input.focus()
    })
  },
  methods: {
    ...mapMutations(['changeLogin']), /* 存取Token */
    login () {
      this.isLoading = true// 开启Loading加载层
      // 表单预验证
      this.$refs.loginFormRef.validate(async (valid) => {
        // 如果表单校验不通过，就直接返回
        if (!valid) {
          this.isLoading = false// 关闭Loading加载层
          return
        }
        this.$axios.post('api/auth/oauth/token', 'username=' + this.loginForm.username + '&password=' + this.loginForm.password + '&grant_type=' + this.loginForm.grant_type, {
          headers: { Authorization: 'Basic ' + Base64.encode('tju:123'), 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(res => {
          if (res.data.code === 200) {
            this.changeLogin({ Authorization: res.data.data.value }) // 将用户token保存到vuex中
            this.$axios.post('dataApi/home/sys/power/menu', { ugc: this.loginForm.username }).then(res => {
              if (res.data.code === 500) {
                ElMessage.error('该用户没有任何权限,请重新登录!')
                this.isLoading = false
                return
              }
              console.log(res.data.data)
              this.$store.commit('handleUserName', JSON.stringify(res.data.data)) // 将登录信息使用vuex传递到Home页面,保存时需字符串
              this.$router.push('/layout') // 2.通过编程式导航跳转到后台主页，路由地址是 /layout
            }).catch(err => {
              console.log(err)
            })
          } else {
            ElMessage.error(res.data.msg)
            this.isLoading = false// 关闭Loading加载层
          }
        }).catch(res => {
          ElMessage.error('用户名或密码错误！')
          this.isLoading = false// 关闭Loading加载层
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/LoginRegister/LoginRegister.css';
.contentLogin {
  z-index: 1;
  width: 500px;
  height: 315px;
  box-sizing: border-box;
  padding: 0 50px;
  border-radius: 5px;
  box-shadow: 0px 2px 12px 0px rgb(253, 253, 253);
  background: rgba(233, 241, 255, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: mymove 1s ease-in-out alternate;
  overflow: hidden;
  transition: 1.5s;
}
@keyframes mymove {
  0% {
    width: 0px;
    height: 5px;
  }
  10% {
    width: 50px;
    height: 5px;
  }
  15% {
    width: 100px;
    height: 5px;
  }
  20% {
    width: 150px;
    height: 5px;
  }
  25% {
    width: 200px;
    height: 5px;
  }
  30% {
    width: 250px;
    height: 5px;
  }
  35% {
    width: 300px;
    height: 5px;
  }
  40% {
    width: 350px;
    height: 5px;
  }
  45% {
    width: 450px;
    height: 5px;
  }
  47.5% {
    width: 500px;
    height: 5px;
  }
  50% {
    height: 15px;
  }
  52.5% {
    height: 30px;
  }
  55% {
    height: 45px;
  }
  57.5% {
    height: 60px;
  }
  60% {
    height: 75px;
  }
  62.5% {
    height: 90px;
  }
  65% {
    height: 105px;
  }
  67.5% {
    height: 120px;
  }
  70% {
    height: 135px;
  }
  72.5% {
    height: 150px;
  }
  75% {
    height: 165px;
  }
  77.5% {
    height: 180px;
  }
  80% {
    height: 195px;
  }
  82.5% {
    height: 210px;
  }
  85% {
    height: 225px;
  }
  87.5% {
    height: 240px;
  }
  90% {
    height: 255px;
  }
  92.5% {
    height: 270px;
  }
  95% {
    height: 285px;
  }
  97.5% {
    height: 300px;
  }
  100% {
    height: 315px;
  }
}
</style>
